<template>
	<view class="content">
		<ZPaging ref="paging" v-model="list" :auto="true" :auto-show-system-loading="true"
			loading-more-no-more-text="沒有更多了" loading-more-default-text="點擊加載更多" loading-more-loading-text="正在加載..."
			loading-more-fail-text="加載失敗,點擊重新加載" empty-view-text="沒有數據哦~" refresher-default-text="繼續下拉刷新"
			refresher-pulling-text="鬆開立即刷新" refresher-refreshing-text="正在刷新" empty-view-reload-text="重新加載"
			empty-view-error-text="加載失敗" @query="queryList">
			<template #top>
				<NavBar :title="info.title" :autoBack="false" id="nav">
					<template #left>
						<view class="navbar-left center" @click="goBack">
							<u-icon name="arrow-left" color="#007aff" size="34"></u-icon>
							<text class="c007aff">專案列表</text>
						</view>
					</template>
					<template #right>
						<view v-if="userinfo.ident===1" class="navbar-right center"
							@click="toPage('AddTask',{id:info.id,type:'task'})">
							<u-icon class="ml-20" name="plus" color="#007aff" size="34"></u-icon>
						</view>
					</template>
				</NavBar>
				<view class="flex totalprogress">
					<view class="bold f32 label"> 目標進度</view>
					<view class="flex val">
						<view class="pro">
							<u-line-progress :show-percent="false" height="8" active-color="#007aff"
								inactive-color="#fac42e" :percent="info.progress"></u-line-progress>
						</view>
						<text class="end txt f26">{{info.progress}}%</text>
					</view>
				</view>
			</template>
			<template #default>

				<view class="list">
					<view class="widths">

						<view v-for="(v,k) in list" :key="k">
							<u-swipe-action v-if="v.ident==1" :show="v.show" :index="k" :options="options"
								:disabled="v.disabled" @open="open" @click="swipeAction">
								<view class="mt-30 item">
									<view class="c007aff bold f30 name">{{v.title}}</view>
									<view class="c007aff bold f30 name" v-if="v.prekeyid>0">前置: {{v.prekeyname}}</view>
									<view class="mt-20 time">{{v.start}}-{{v.end}}</view>
									<view class="delay" v-if="v.delaydays > 0">延遲{{v.delaydays}}天</view>
									<view class="delay" v-if="v.delaydays < 0">提前{{Math.abs(v.delaydays)}}天</view>
									<view class="flex mt-20 progress">
										<view class="left">
											<view class="txt">實際進度: {{v.actual}}</view>
											<view class="txt">預計進度: {{v.plan}}</view>
											<view class="txt">工程費用: {{v.price}}</view>
										</view>
										<view class="center right">
											<view class="circle">
												<u-circle-progress width="160" border-width="8" active-color="#007aff"
													:percent="v.progress">
													<view class="f26 bold txt">{{v.progress}}%</view>
												</u-circle-progress>
											</view>
											<view class="center cfff f26 text" v-if="userinfo.ident!=3"
												@click.stop="toProgress(v.progress,v.prekeyid,{id:v.id,leftTitle:info.title})">
												進度管控
											</view>
										</view>
									</view>
								</view>
							</u-swipe-action>
							<view v-else class="mt-30 item">
								<view class="c007aff bold f30 name">{{v.title}}</view>
								<view class="c007aff bold f30 name" v-if="v.prekeyid>0">前置: {{v.prekeyname}}</view>
								<view class="mt-20 time">{{v.start}}-{{v.end}}</view>
								<view class="delay" v-if="v.delaydays > 0">延遲{{v.delaydays}}天</view>
								<view class="delay" v-if="v.delaydays < 0">提前{{Math.abs(v.delaydays)}}天</view>
								<view class="flex mt-20 progress">
									<view class="left">
										<view class="txt">實際進度: {{v.actual}}</view>
										<view class="txt">預計進度: {{v.plan}}</view>
										<view class="txt">工程費用: {{v.price}}</view>
									</view>
									<view class="center right">
										<view class="circle">
											<u-circle-progress width="160" border-width="8" active-color="#007aff"
												:percent="v.progress">
												<view class="f26 bold txt">{{v.progress}}%</view>
											</u-circle-progress>
										</view>
										<view class="center cfff f26 text" v-if="userinfo.ident!=3"
											@click.stop="toProgress(v.progress,v.prekeyid,{id:v.id,leftTitle:info.title})">
											進度管控
										</view>
									</view>
								</view>
							</view>
						</view>



					</view>

				</view>

			</template>
		</ZPaging>
		<!-- 刪除 -->
		<u-modal v-model="delshow" :mask-close-able="true" :show-cancel-button="true" title="確認刪除任務嗎？"
			content="將會刪除該任務下的所有數據,刪除后不可恢復" @confirm="delTaskById"></u-modal>
		<Tabar></Tabar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		getTasklist,
		getCasezyProgress,
		getTaskProgressById,
		delTask
	} from "@/api/apis.js"
	import NavBar from "@/component/NavBar"
	import Tabar from "@/component/HomeTab"
	import ZPaging from "@/node_modules/z-paging/components/z-paging/z-paging.vue"
	export default {
		components: {
			NavBar,
			ZPaging,
			Tabar
		},
		data() {
			return {
				delshow: false,
				delId: 0,
				curId: 0,
				title: "",
				list: [],
				info: {
					title: "摘要 #1",
				},
				options: [{
						text: 'Edit',
						style: {
							backgroundColor: '#ccc',
							color: '#fff'
						}
					},
					{
						text: 'Delete',
						style: {
							backgroundColor: '#ff0000',
							color: '#fff'
						}
					}
				]
			}
		},
		onShow() {

			this.$nextTick(() => {
				if (uni.getStorageSync("islogin")) {
					if (!this.curId) {
						this.$Toast("數據錯誤")
						setTimeout(() => {
							this.toPage("Main")
						}, 1200)
					} else {
						this.reload();
						this.init()
					}
				}
			})
		},
		mounted() {
			this.previousWidth = window.innerWidth;
			this.previousHeight = window.innerHeight;
			window.addEventListener('resize', this.handleResize);
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.handleResize);
		},
		onLoad() {
			if (uni.getStorageSync("islogin")) {
				const {
					id
				} = this.$Route.query
				if (!id) {
					this.$Toast("數據錯誤")
					setTimeout(() => {
						this.toPage("Main")
					}, 1200)
				} else {
					this.curId = id
					// this.init()
				}
			} else {
				this.$Toast("請先登錄")
				setTimeout(() => {
					this.toPage("Home")
				}, 1200)
			}
		},
		computed: {
			...mapState(["userinfo"]),
		},
		methods: {
			toProgress(v, prekeyid, params) {
				if (v >= 100) {
					this.$Toast("該任務已完成")
					return;
				} else if (prekeyid > 0) {
					//獲取前置任務
					let uid = uni.getStorageSync("uid")
					getTaskProgressById({
						id: prekeyid,
						uid
					}).then((res) => {
						if (!res.data) {
							this.$Toast("前置任務未完成")
							return;
						} else {
							this.toPage("TaskLog", params)
						}
					}).catch((err) => {
						if (err.code === 102) {
							this.$ClearLogin(err.msg)
						} else {
							this.$Toast(err.msg)
						}
					})
				} else {
					this.toPage("TaskLog", params)
				}
			},
			handleResize() {
				const currentWidth = window.innerWidth;
				const currentHeight = window.innerHeight;
				const swipeViews = document.querySelectorAll('.u-swipe-view');
				swipeViews.forEach((swipeView) => {
					swipeView.style.width = `calc(100% + 180px)`;
				});
				//  if (currentWidth !== this.previousWidth || currentHeight !== this.previousHeight) {
				// this.previousWidth = currentWidth;
				// this.previousHeight = currentHeight;
				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		if (res.platform === 'windows' || res.platform === 'mac') {
				// 			this.loginout()
				// 			location.reload();
				// 		}
				// 	}
				// });
				//  }
			},
			loginout() {
				uni.removeStorageSync("uid");
				uni.removeStorageSync("userToken");
				uni.removeStorageSync("ident")
				uni.removeStorageSync("islogin")
				uni.removeStorageSync("name")
				uni.removeStorageSync("tabIndex")
				uni.removeStorageSync('caseid')
				uni.removeStorageSync("fileDir")
				this.$Toast("退出成功")
				setTimeout(() => {
					//跳轉到登錄頁
					this.$navi({
						route: {
							name: 'Home',
						},
					})
				}, 1200)

			},
			swipeAction(index, subindex) {
				if (subindex === 0) {
					//to edit
					this.toPage('AddTask', {
						type: 'task',
						model: 'edit',
						id: this.list[index].id
					})
				} else {
					//to delete
					this.delId = this.list[index].id;
					this.delshow = true
				}
			},
			open(index) {
				this.list[index].show = true
				this.list.map((v, k) => {
					if (index != k) this.list[k].show = false
				})
			},
			delTaskById() {
				// deltask
				if (this.delId <= 0) {
					return false;
				}
				let data = {
					id: this.delId,
					uid: uni.getStorageSync("uid"),
				}
				delTask(data).then((res) => {
					this.$Toast(res.msg)
					setTimeout(() => {
						this.init()
						this.reload()
					}, 1200)
				}).catch((err) => {
					if (err.code === 102) {
						this.$ClearLogin(err.msg)
					} else {
						this.$Toast(err.msg)
					}
				})
			},
			init() {
				//拿取範例信息
				let uid = uni.getStorageSync("uid")
				getCasezyProgress({
					id: this.curId,
					uid
				}).then((res) => {
					this.info = res
				}).catch((err) => {
					if (err.code === 102) {
						this.$ClearLogin(err.msg)
					} else {
						this.$Toast(err.msg)
					}
				})

			},
			queryList(pageNo, pageSize) {
				let data = {
					pageNo,
					pageSize,
					id: this.curId,
					uid: uni.getStorageSync("uid")
				}
				getTasklist(data).then((res) => {
					this.$refs.paging.complete(res)
				}).catch((err) => {
					if (err.code === 102) {
						this.$ClearLogin(err.msg)
					} else {
						this.$Toast(err.msg)
					}
				})

			},
			reload() {
				this.$refs.paging.reload();
			},
			goBack() {
				uni.navigateBack(-1)
			},
			toPage(name, params = {}) {
				this.$navi({
					route: {
						name,
						params
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
	}

	.totalprogress {
		height: 228rpx;
		background-color: #ffd33b;
		padding: 0 4%;
		padding-top: 88rpx;

		.label {
			width: 140rpx;
			flex-shrink: 0;
		}

		.val {
			width: calc(100% - 160rpx);

			.pro {
				width: calc(100% - 70rpx);
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				top: 4rpx;
			}

			.txt {
				width: 70rpx;
				flex-shrink: 0;
			}
		}
	}

	.list {
		padding-bottom: 50rpx;

		/deep/ .u-btn-text {
			color: #fff !important;
		}

		.item {
			padding: 0 40rpx;

			.progress {
				align-items: flex-start;

				.left {
					width: 50%;

					.txt {
						line-height: 2;
					}
				}

				.right {
					justify-content: flex-end;
					width: 50%;

					.circle {
						width: 160rpx;
						flex-shrink: 0;
					}

					.text {
						flex-shrink: 0;
						width: 140rpx;
						height: 50rpx;
						background-color: #007aff;
						border-radius: 24rpx;
						margin-left: 20rpx;

					}
				}
			}
		}
	}
</style>